<template>
  <view class = "content">
    <!--  顶部标题栏  -->
    <!--		<view class="Tab">
          <view class="Tab_left">
            <image :src = "`${BASE_URL}/mine/back.png`" class="back_icon" @click="back"></image>
          </view>
          <view class="Tab_center">
            <view class="Tab_text">积分中心</view>
          </view>
        </view>-->
    <view class = "top">
      <view class = "top_left">
        <view class = "integral_detail">
          积分明细
        </view>
      </view>
      <view class = "top_center">
        <view style = "display: flex;flex-direction: column;">
          <view style = "font-size: 50px;color: white;text-align: center;">120</view>
          <view style = "font-size: 15px;color: white;text-align: center;">我的积分</view>
        </view>
      </view>
    </view>
    <view class = "center">
      <view class = "center_top">积分明细</view>
      <view class = "flex">
        <view class = "flex_left">
          <view style = "font-size: 16px;">通关“苏维埃政府”关卡</view>
          <view style = "font-size: 12px;color: gray;">2025.01.20 20:45:55</view>
        </view>
        <view class = "integral_style">+20</view>
      </view>
      <view class = "flex">
        <view class = "flex_left">
          <view style = "font-size: 16px;">体验任意游戏一次</view>
          <view style = "font-size: 12px;color: gray;">2025.01.20 20:45:55</view>
        </view>
        <view class = "integral_style">+20</view>
      </view>
      <view class = "flex">
        <view class = "flex_left">
          <view style = "font-size: 16px;">体验任意游戏一次</view>
          <view style = "font-size: 12px;color: gray;">2025.01.20 20:45:55</view>
        </view>
        <view class = "integral_style">+20</view>
      </view>
      <view class = "flex">
        <view class = "flex_left">
          <view style = "font-size: 16px;">体验任意游戏一次</view>
          <view style = "font-size: 12px;color: gray;">2025.01.20 20:45:55</view>
        </view>
        <view class = "integral_style">+20</view>
      </view>
      <view class = "flex">
        <view class = "flex_left">
          <view style = "font-size: 16px;">体验任意非遗文化一次</view>
          <view style = "font-size: 12px;color: gray;">2025.01.20 20:45:55</view>
        </view>
        <view class = "integral_style">+20</view>
      </view>
      <view class = "flex">
        <view class = "flex_left">
          <view style = "font-size: 16px;">体验任意龙川杂技一次</view>
          <view style = "font-size: 12px;color: gray;">2025.01.20 20:45:55</view>
        </view>
        <view class = "integral_style">+20</view>
      </view>
    </view>
  </view>
</template>
<script setup>
import {
  ref
} from 'vue';
import {BASE_URL} from "../../../utils/api";

function back() {
  uni.navigateTo({
    //放置跳转页面
    url: '/pages/mine/integral/integral'
  });
}
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#a7e7a7, #f3f3f3);
  padding-bottom: 50%;
}

.Tab {
  width: 100%;
  height: 7vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Tab_left {
  display: flex;
  flex: 0.3;
}

.Tab_center {
  display: flex;
  flex: 1.5;
  justify-content: center;
  margin-right: 50px;
}

.back_icon {
  width: 30px;
  height: 30px;
}

.Tab_text {
  font-size: 18px;
  font-weight: 800;
}

.top {
  margin-top: 35px;
  width: 100%;
  flex: 0.4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top_left {
  flex: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.integral_detail {
  text-align: center;
  font-size: 12px;
  color: white;
  padding: 5px 10px;
  background-color: gray;
  border-radius: 20px;
}

.top_center {
  flex: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 80px;
}

.center {
  margin-top: 35px;
  flex: 1;
  width: 80%;
  display: flex;
  flex-direction: column;
  border-radius: 30;
  gap: 20rpx;
  background-color: white;
  padding: 20px;
  border-radius: 30px;
}

.center_top {
  display: flex;
  width: 100%;
  font-weight: 800;
  color: #7ecbfd;
  justify-content: center
}

.flex {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 90%;
  padding: 10px 0;
  border-bottom: 1px solid gray;
}

.flex_left {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
}

.integral_style {
  color: #ffef63;
  font-weight: 800;
}

</style>